/* eslint-disable react-refresh/only-export-components */
import React, { useState } from "react";
import {
  NavBar,
  Space,
  Toast,
  SearchBar,
  Tag,
  IndexBar,
  List,
} from "antd-mobile";
import { useLoaderData, useNavigate, useParams } from "react-router-dom";
import styles from "./css/Index.module.css";
import { LocationFill } from "antd-mobile-icons";
import { cityapi, citysapi } from "../../api/city";
import { setCity } from "../../qie/slice/ticket";
import { useDispatch } from "react-redux";
import { sousuocity } from "../../api/city";
import { useFD } from "../../hook/useFD";
import Sousuo from "./components/Sousuo";
import Changyong from "./components/Changyong";
function Index() {
  const fd = useFD();
  const params = useParams();
  const tiao = useNavigate();
  const [sousuolist, setsousuolist] = useState([]);
  const nav = useNavigate();
  const dispath = useDispatch();
  const { loader, hot, list } = useLoaderData();
  const dianji = (porName, city) => {
    dispath(setCity({ porName, city }));
    tiao(-1);
  };
  const [kw, setkw] = useState();
  const change = (key) => {
    // console.log(key);
    setkw(key);
    if (key.lenght != 0) {
      ccc(key);
    } else {
      setsousuolist([]);
    }
  };

  const ccc = fd(async (key) => {
    const { data: res } = await sousuocity(key);
    console.log(res);
    setsousuolist(res);
  });
  return (
    <div>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)}>
          <SearchBar placeholder="请输入搜索关键字" onChange={change} />
        </NavBar>
      </div>
      {kw ? (
        <div>
          <Changyong></Changyong>
          <Sousuo list={sousuolist} dianji={dianji}></Sousuo>
        </div>
      ) : (
        <div>
          <div className={styles.shang}>
            <span onClick={() => dianji(params.type, loader)}>
              当前热门城市：
              <LocationFill />
              {loader}
            </span>
          </div>

          <div className={styles.zhong}>
            <span className={styles.zhonga}>热门城市</span>
            <div className={styles.zhongb}>
              {hot.map((item, i) => {
                return (
                  <Tag
                    key={i}
                    color="#efefef"
                    className={styles.zhongc}
                    onClick={() => dianji(params.type, item.name)}
                  >
                    {item.name}
                  </Tag>
                );
              })}
            </div>
          </div>
          <div className={styles.xia}>
            <IndexBar>
              {list.map((group) => {
                const { title, items } = group;
                return (
                  <IndexBar.Panel
                    index={title}
                    title={`标题${title}`}
                    key={`标题${title}`}
                  >
                    <List>
                      {items.map((item, index) => (
                        <List.Item
                          key={index}
                          onClick={() => dianji(params.type, item.name)}
                        >
                          {item.name}
                        </List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
            </IndexBar>
          </div>
        </div>
      )}
    </div>
  );
}

export default Index;
export const loader = async () => {
  const { data: res } = await cityapi();
  const { data: ress } = await citysapi();
  console.log(ress);
  return { loader: res.city, hot: ress.hotCities, list: ress.cityList };
};
